<script setup>
import { useCounterStore } from '../stores/counter.js'
import Person from './Person.vue'
import { storeToRefs } from 'pinia';
const store = useCounterStore();
const { count, doubleCount } = store;
const { count: refCount, doubleCount: refDoubleCount } = storeToRefs(store);
</script>

<template>
  <main>
    <Person />
    <hr>
    <p>count：{{ count }}</p>
    <p>doubleCount：{{ doubleCount }}</p>
    <p>store.count：{{ store.count }}</p>
    <p>store.doubleCount：{{ store.doubleCount }}</p>
    <p>refCount：{{ refCount }}</p>
    <p>doubleCount：{{ doubleCount }}</p>
    <button @click="store.count++">store.count++</button>
    <br>
    <button @click="count++">count++</button>
    <br>
    <button @click="refCount++">refCount++</button>
  </main>
</template>
